<template>
    <el-row class="login-box">
        <el-col class="img-login" :span="12">
            <img src="../assets/imgs/login_img.png" alt="" srcset="" />
        </el-col>
        <el-col :span="12">
            <el-card>
                <div class="user-img">
                    <img src="../assets/imgs/login_logo.png" alt="" srcset="" />
                </div>
                <div class="title">电商后台管理系统</div>
                <el-form :model="user" :rules="loginRules" ref="loginForm">
                    <el-form-item prop="username">
                        <el-input
                            prefix-icon="iconfont icon-user"
                            placeholder="请输入用户名"
                            v-model="user.username"
                            :disabled="isLoading"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                            prefix-icon="iconfont icon-lock_fill"
                            placeholder="请输入密码"
                            :show-password="true"
                            v-model="user.password"
                            :disabled="isLoading"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            @click="submitForm"
                            :loading="isLoading"
                            >登陆</el-button
                        >
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
        <Vcode
            :show="isShow"
            :sliderSize="30"
            @close="isShow = false"
            @success="changePage"
        ></Vcode>
    </el-row>
</template>

<script>
import { userRule } from '@/rules/userRules.js'
// import axios from 'axios';

// es6 的 import from 方法导入的模块没有 export default 结果时，
// 必须使用 import { } from 进行结构获取
// 或者使用 import * as 变量 from 进行对象变量合并
// import { userLogin } from '../api/user.js';
import * as userApi from "@/api/user.js";

// import NProgress from "nprogress";
import Vcode from "vue-puzzle-vcode";
export default {
    components: {
        Vcode,
    },
    data() {
        return {
            isLoading: false,
            isShow: false,
            user: {
                username: "admin",
                password: "123456",
            },
            // loginRules: {
            //     username: [
            //         {
            //             required: true,
            //             message: "用户名不能为空",
            //             trigger: "blur",
            //         },
            //         {
            //             min: 3,
            //             max: 8,
            //             message: "用户名长度在3~8之间",
            //             trigger: "blur",
            //         },
            //     ],
            //     password: [
            //         {
            //             required: true,
            //             message: "登陆密码不能为空",
            //             trigger: "blur",
            //         },
            //     ],
            // },
			loginRules:userRule
        };
    },
    methods: {
        submitForm() {
            // console.log("提交表单,切换页面,完成登陆");
            this.$refs.loginForm.validate((flag) => {
                if (flag) {
                    // this.$router.push("/home")
                    this.isShow = true;
                    this.isLoading = true;
                }
            });
        },
        // async changePage(){
        // 	try {
        // 		this.isShow = false;
        // 		NProgress.start();
        // 		// 跳转页面
        // 		// 请求
        // 		// setTimeout(() => {
        // 		// 	NProgress.done();
        // 		// 	this.$router.push("/home")
        // 		// }, 5000*2);
        // 		let { data:{ data,meta },status} = await axios.post("http://www.tangxiaoyang.vip:8888/api/v2/login",this.user);
        // 		if(status!=200){
        // 			this.$message.error("网络连接错误，请稍后重试");
        // 		}
        // 		if(meta.status!=200){
        // 			this.$message.error(meta.msg);
        // 		}
        // 		if( status==200&&meta.status==200 ){
        // 			console.log(data);
        // 			this.$message.success("欢迎您："+data.username);
        // 		}
        // 		this.isLoading = false;
        // 		NProgress.done();
        // 		this.$router.push("/home");
        // 	} catch (error) {
        // 		this.$message.error("页面运行错误，请稍后重试");
        // 	}
        // }
        async changePage() {
            this.isShow = false;
            let user = await userApi.userLogin(this.user);
            // console.log(user);
            if(user){
                sessionStorage.setItem("user",JSON.stringify(user));
                this.$message.success("欢迎您："+user.username);
                this.$router.push("/home");
            }
            this.isLoading = false;
        },
    },
};
</script>

<style lang="less" scoped>
.login-box {
    background-color: @bg-color;
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding-bottom: 120px;
}
.img-login {
    text-align: right;
    padding-right: 60px;
    img {
        width: 100%;
        max-width: 500px;
    }
}
.el-card {
    width: 400px;
    overflow: initial;
    position: relative;
    .user-img {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: @bg-color;
        display: inline-block;
        padding: 6px;
        border-radius: 50%;
        overflow: hidden;
        font-size: 0px;
        > img {
            background-color: white;
            border-radius: 50%;
            width: 120px;
            height: 120px;
            padding: 12px;
        }
    }
    .title {
        font-size: 24px;
        text-align: center;
        margin-top: 80px;
        margin-bottom: 20px;
        color: @font-p;
    }
}
.el-button {
    width: 100%;
}
</style>
